<!-- 歌曲列表-虚拟无限滚动列表 -->
<template>
	<view
		id="infinite__ul"
		@tap.stop.prevent="tapHandler($event)"
		class="list-songs__ul infinite__list"
		:style="{
			height: data.listHeight,
			'padding-top': pdTop
		}"
	>
		<!-- 绝了，注释如果放在根节点，获取当前组件实例时就是#text，会把注释也算进去 -->
		<!-- items s -->
		<view class="list-songs__li infinite__item" v-for="item in songs" :key="item.payload" :data-idx="item.idx">
			<!-- 序号 -->
			<view class="list-songs__li-idx">{{ item.idx }}</view>
			<!-- 歌曲信息和按钮 -->
			<view class="list-songs__li-main" :hover-class="'infinite__item-hover'" :hover-start-time="100">
				<view class="list-songs__li-main-info">
					<!-- 歌曲名 -->
					<view class="list-songs__li-main-info-title text-ellipsis-single">{{ item.title }}</view>
					<!-- 作者 -->
					<view class="list-songs__li-main-info-desc">
						<!-- 图标 -->
						<image v-if="item.maxQ === 'sq'" class="list-songs__li-main-info-icon" src="@/static/edg.png" mode="aspectFit" />
						<image v-else-if="item.maxQ === 'h'" class="list-songs__li-main-info-icon" src="@/static/ed0.png" mode="aspectFit" />
						<image v-if="['1'].includes(item.fee.toString())" class="list-songs__li-main-info-icon" src="@/static/edm.png" mode="aspectFit" />
						<image v-if="['1'].includes(item.fee.toString())" class="list-songs__li-main-info-icon" src="@/static/edi.png" mode="aspectFit" />
						<image v-else-if="item.fee.toString() === '4'" class="list-songs__li-main-info-icon" src="@/static/ecs.png" mode="aspectFit" />
						<text class="text-ellipsis-single">{{ item.artist }} - {{ item.album }}</text>
					</view>
				</view>
			</view>
			<!-- mv按钮 -->
			<view class="list-songs__li-main-btn">
				<!-- <view class="list-songs__li-main-btn__mv" v-if="item.mv" /> -->
				<view data-on-more class="list-songs__li-main-btn__more" />
			</view>
		</view>
		<!-- items e -->
	</view>
</template>

<script>
export default {
	name: 'ListSongsInfinite',
	data() {
		return {
			data: {
				// 截取数组的下标
				startIdx: 0,
				endIdx: 1,

				// 一页能显示的个数
				screenCount: 0,

				// 整个列表的总高度
				listHeight: '100%',

				// 每个li的高度
				unitHeight: 0,

				// 列表距离顶部的距离
				viewScrollTop: undefined
			}
		};
	},
	props: {
		songs: {
			type: Array
		}
	},

	onPageScroll(e){
		scrollHandler(e)
	},
	watch: {
		'songs.length': {
			immediate: true,
			handler(newlength) {
				if (newlength > 0) {
					this.$nextTick(() => {
						// 初始化时只渲染一条数据，用来获取计算需要的信息。然后再渲染第一屏数据
						uni.createSelectorQuery()
							.in(this)
							.select('.infinite__item')
							.boundingClientRect((res) => {
								if (this.data.viewScrollTop === undefined) {
									// 滚动区域距离屏幕顶部的距离
									this.data.viewScrollTop = res.top;
									// 每首歌li的高度
									this.data.unitHeight = res.height;
									// 所有数据的原始高度
									this.data.listHeight = res.height * newlength + 'px';
									// 满屏可以显示多少条数据（设置后开始渲染一屏的数据）
									this.data.screenCount = this.data.endIdx = Math.ceil(uni.getSystemInfoSync().screenHeight / this.data.unitHeight);
								} else {
									// 所有数据的原始高度
									this.data.listHeight = res.height * newlength + 'px';
								}
							})
							.exec();
					});
				}
			}
		}
	},

	computed:{
		slicesongs(){
			return this.songs.slice(this.data.startIdx, this.data.endIdx)
		},
		pdTop(){
			const paddingTop = this.data.unitHeight * this.data.startIdx
			return `${paddingTop}px`
		},

	},

	methods:{
		scrollHandler(e) {
		  const scrollTop = (e.scrollTop * 1000 - this.data.viewScrollTop * 1000) / 1000

		  // 提前渲染数量
		  const preload = Math.ceil(this.data.screenCount * 2)

		  let startIdx
		  let endIdx

		  if (scrollTop >= 0) {
		    endIdx = Math.floor(scrollTop / this.data.unitHeight) + this.data.screenCount + preload
		    if (endIdx > this.songs.length) endIdx = this.songs.length

		    startIdx = endIdx - this.data.screenCount - 1 - preload * 2
		    if (startIdx < 0) startIdx = 0
		  } else {
		    startIdx = 0
		    endIdx = this.data.screenCount + preload
		  }

		  if (startIdx !== this.data.startIdx) this.data.startIdx = startIdx
		  if (endIdx !==this.data.endIdx) this.data.endIdx = endIdx
		},

		// 播放单曲
		tapHandler(e) {
			//e.changedTouches[0].pageY :触摸点的y坐标
		  const curSongIdx = Math.floor((e.changedTouches[0].pageY - this.data.viewScrollTop) / this.data.unitHeight)
		  const curSongInfo = this.songs[curSongIdx]

		  if (Object.keys(e.target.dataset).includes('onMore')) {
		    uni.$emit('popupOpen', curSongInfo)
		  } else {
			  this.$store.dispatch('player/setPlayerInfo',curSongInfo.payload)
		    // 打开播放器
		    uni.navigateTo({
		      url: `/pages/player/player?type=poster&payload=${this.data.payload}`
		    })
		  }
		}
	}
};
</script>

<style lang="scss" scoped>
	// 歌曲列表
	.list-songs__ul {
	  box-sizing: border-box;
	  width: 100%;
	  .list-songs__li {
	    display: flex;
	    height: 111.5rpx;
	    width: 100%;
	
	    // 1.序号
	    .list-songs__li-idx {
	      flex-shrink: 0;
	      width: 38.5rpx;
	      height: 100%;
	      margin-right: 10rpx;
	      display: flex;
	      justify-content: center;
	      align-items: center;
	      font-size: 24.3rpx;
	      color: rgb(153, 153, 153);
	    }
	
	    // 2.一首歌曲
	    .list-songs__li-main {
	      padding-left: 10.5rpx;
	      display: flex;
	      width: 100%;
	      justify-content: space-between;
	      align-items: center;
	      line-height: 1.6;
	      border-radius: 10rpx;
	
	      // 歌曲信息
	      .list-songs__li-main-info {
	        width: 505rpx;
	        .list-songs__li-main-info-title {
	          font-size: 32rpx;
	          color: var(--theme-text-title-color);
	        }
	        .list-songs__li-main-info-desc {
	          font-size: 24rpx;
	          display: flex;
	          align-items: center;
	          color: var(--theme-text-sub-color);
	          .list-songs__li-main-info-icon {
	            flex-shrink: 0;
	            height: 20rpx;
	            width: 33.33rpx;
	            margin-right: 9rpx;
	          }
	        }
	      }
	    }
	
	    // MV按钮
	    .list-songs__li-main-btn {
	      display: flex;
	      align-items: center;
	      justify-content: space-between;
	      height: 100%;
	
	      .list-songs__li-main-btn__mv {
	        height: 100%;
	        width: 37.2rpx;
	        background-color: rgb(179, 179, 179);
	        mask-repeat: no-repeat;
	        mask-image: url('@/static/t_actionbar_video_selected.png');
	        mask-position: center;
	        mask-size: 37.2rpx auto;
	        // margin: 0 15rpx;
	      }
	      .list-songs__li-main-btn__more {
	        height: 100%;
	        width: 37.2rpx;
	        background-color: rgb(179, 179, 179);
	        mask-repeat: no-repeat;
	        mask-image: url('@/static/ffh.png');
	        mask-position: center;
	        mask-size: 37.2rpx auto;
	        padding: 0 15rpx;
	      }
	    }
	  }
	
	  .infinite__item-hover {
	    background-color: rgba(0, 0, 0, 0.05);
	  }
	}
</style>
